<script setup lang="ts">
import { RouterLink, RouterView, useRouter } from 'vue-router'
import { ref, reactive, onMounted, nextTick, computed, defineEmits } from 'vue';
import BallDragging from './components/BallDragging.vue'
import { storeToRefs } from 'pinia'
import { usePlayerStore } from './stores/player'
import SongDetails from './components/SongDetails.vue';
const active = ref(0);
const audioDom = ref();
const currentTime = ref(0)
const duration = ref(0)

const tabBars = reactive([
  {
    name: "/",
    title: "发现",
    active: ("../src/assets/imgs/navbar/music-active.png"),
    normal: ("../src/assets/imgs/navbar/music.png"),
  },
  {
    name: "/mv",
    title: "MV",
    active: ("../src/assets/imgs/navbar/video-active.png"),
    normal: ("../src/assets/imgs/navbar/video.png"),
  },
  {
    name: "/mine",
    title: "我的",
    active: ("../src/assets/imgs/navbar/icon_me_tab_normal_selected.png"),
    normal: ("../src/assets/imgs/navbar/icon_me_tab_normal_unselected.png"),
  },
])
const playerStore = usePlayerStore()
const { isShow, songUrl, isPlay, currentIndex } = storeToRefs(playerStore)

onMounted(() => {
  // console.log(audioDom.value);
})

// 改变播放音乐的状态
const onChangePlayMusic = () => {
  isPlay.value = !isPlay.value
  if (isPlay.value) {
    audioDom.value.play();
  } else {
    audioDom.value.pause();
  }
  console.log(isPlay.value);

}
// 获取总时长
const getAudioMetaSource = () => {
  duration.value = audioDom.value.duration

}
// 获取当前播放时长
const audioTimeupdate = () => {
  currentTime.value = audioDom.value.currentTime
  if (duration.value == currentTime.value) {
    playerStore.isPlay = false;
  }
}

// 拖动进度条改变音乐时长
const onChangeCurrentTime = (num: number) => {
  audioDom.value.currentTime = num
}

// 接收子组件的方法，暂停播放和隐藏小球
const onCloseMusic = () => {
  isPlay.value = false
  isShow.value = false
  currentIndex.value = -1
  audioDom.value.pause()
}

</script>

<template>
  <div class="app-container">
    <RouterView />
    <!-- <router-view class="content" v-slot="{ Component }">
      <keep-alive>
        <component :is="SongDetails" />
      </keep-alive>
    </router-view> -->
    <!-- NavBar栏-->
    <van-tabbar v-model="active" active-color="#fff" route>
      <van-tabbar-item :to="item.name" v-for="(item, index) in tabBars" :key="index">
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.active : item.normal" />
        </template>
      </van-tabbar-item>
    </van-tabbar>

    <div class="player" v-show="isShow">
      <div>
        <BallDragging :currentTime="currentTime" :duration="duration" @setclosemusic="onCloseMusic"
          @setplaystate="onChangePlayMusic" @setaudiocurrenttime="onChangeCurrentTime">
        </BallDragging>
      </div>
    </div>
    <!-- 播放小球控制器 -->
    <audio v-if="songUrl" ref="audioDom" :src="songUrl" @canplay="getAudioMetaSource" @timeupdate="audioTimeupdate"
      autoplay></audio>

  </div>

</template>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;

  ::-webkit-scrollbar {
    width: 0 !important;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }

  .van-tabbar {
    background: #000;

    .van-tabbar-item--active {
      background: none;
    }
  }

  audio {
    position: absolute;
    top: 50%;

  }

  .player {}
}
</style>
